<template>
    <el-row justify="space-evenly">
        <!-- logo列 -->
        <el-col :xs="12" :sm="10" :md="8">
            <div class="Logo">
                <el-avatar :size="50" :src="Logo" />
                <h2>教师档案管理系统</h2>
            </div>
        </el-col>
<!--        <el-col :span="6"></el-col>-->
        <!-- 信息列 -->
        <el-col :xs="12" :sm="10" :md="8">
            <div class="Logo" style="float: right">
                <el-dropdown size="large" style="color: white; line-height: 50px; margin-right: 20px; font-size: 20px;  align-items: center;">
                    <span >
                        {{userdata.name}}
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item  @click="dialogVisible = true">修改密码</el-dropdown-item>
                            <el-dropdown-item @click="exit">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-avatar :size="50" style="font-size: 24px">{{avatarFont}}</el-avatar>
            </div>
        </el-col>
    </el-row>
    <change-password :is-dom-dialog="dialogVisible" @DialogClosed="dialogVisible=$event"></change-password>
<!--    修改密码的dialog-->
<!--    <el-dialog v-model="dialogVisible" width="45%" title="修改密码" align-center destroy-on-close>-->
<!--        <el-row justify="center">-->
<!--            <el-col :span="18">-->
<!--                <el-alert style="margin-bottom: 18px" type="warning" title="新密码长度8-20位，由字母和数字组成，不能出现中文和特殊字符。" show-icon :closable="false"></el-alert>-->
<!--                <el-form size="large" :rules="passwordRules" ref="changePasswordDialog" :model="changePasswordDialogForm">-->
<!--                    <el-form-item label="原始密码" prop="curr_pw">-->
<!--                        <el-input show-password v-model="changePasswordDialogForm.curr_pw" placeholder="请输入您的原始密码"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="新的密码" prop="new_pw">-->
<!--                        <el-input show-password v-model="changePasswordDialogForm.new_pw" placeholder="请输入您的新密码"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="确认密码" prop="new_pw_verify">-->
<!--                        <el-input show-password v-model="changePasswordDialogForm.new_pw_verify" placeholder="请再次输入新密码"></el-input>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--            </el-col>-->
<!--        </el-row>-->

<!--        <template #footer>-->
<!--          <span class="dialog-footer">-->
<!--            <el-button type="primary" @click="changePasswordSubmit">提交</el-button>-->
<!--          </span>-->
<!--        </template>-->
<!--    </el-dialog>-->
</template>

<script>
import Logo from '@/assets/Logo.jpg'
import { ArrowDown } from '@element-plus/icons-vue'
import {ElMessageBox, ElMessage} from "element-plus";
import  ChangePassword   from '../header/ChangePassword.vue'
import useStore from "@/store/store";
const store = useStore()
export default {
    name: "HomeHeader",
    data(){
        return {
            Logo,
            userdata: {
                name: store.user_name
            },
            dialogVisible: false,
            changePasswordDialogForm: {
                curr_pw: '',
                new_pw: '',
                new_pw_verify: ''
            },
            // passwordRules: {
            //     curr_pw: [
            //         { required: true, message: '请输入原始密码', trigger: 'blur' }
            //     ],
            //     new_pw: [
            //         { required: true, message: '请输入新密码', trigger: 'blur' },
            //         {min: 8, max: 20, message: '密码长度为8-20位', trigger: 'blur'},
            //         {pattern: /^[a-zA-z0-9]+$/, message: '请确认密码的合法性', trigger: 'blur'}
            //     ],
            //     new_pw_verify: [
            //         { required: true, message: '请输入确认密码', trigger: 'blur' },
            //         {
            //             trigger: ['blur', 'change'],
            //             validator: (rule, value, callback) => {
            //                 if (this.changePasswordDialogForm.new_pw !== value) {
            //                     callback(new Error('两次密码不一致，请重新输入'))
            //                 } else {
            //                     callback()
            //                 }
            //             }
            //         }
            //     ]
            // }
        }
    },
    computed: {
        avatarFont() {
            return this.userdata.name ? this.userdata.name[0] : ''
        }
    },
    components: {ArrowDown, ChangePassword},
    methods: {
        exit() {
            ElMessageBox.confirm(
                '确定要退出登录吗，未提交的数据将丢失',
                '退出登录',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: "warning",
                    center: true
                }
            ).then(() => {
                store.$reset()
                this.$router.push('/')
            })
        },
        // changePasswordSubmit() {
        //     this.$refs.changePasswordDialog.validate((validate, message) => {
        //         if (!validate) return false
        //         this.changePasswordPush()
        //     })
        // },
        // changePasswordPush() {
        //     const {new_pw, curr_pw} = this.changePasswordDialogForm
        //     this.$api.pushChangePasswordData({
        //         user_id: store.user_id,
        //         curr_pw,
        //         new_pw,
        //     }).then(
        //         response => {
        //             switch (response.data.update_status) {
        //                 case 0:
        //                     ElMessage.error('密码修改失败')
        //                     this.changePasswordDialogForm.curr_pw = ''
        //                     break;
        //                 case 1:
        //                     ElMessage.success('密码修改成功')
        //                     this.dialogVisible = false
        //                     break;
        //                 case 2:
        //                     ElMessage.warning('当前密码错误，请重新输入')
        //                     this.changePasswordDialogForm.curr_pw = ''
        //                     break;
        //                 default:
        //                     ElMessage.error('超出预期的值' + response.data.update_status)
        //             }
        //         },
        //         error => {
        //             ElMessage.error(error.message)
        //         }
        //     )
        // }
    }
}
</script>

<style scoped>
.Logo {
    display: flex;
    margin: 20px 0;
}
.Logo h2 {
    color: white;
    margin-left: 20px;
    line-height: 50px;
}
</style>